import React, { memo } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import styles from './index.less';
import { Album } from '@/services/explore';
import { PlayState } from '@/models/player';
import { Tag } from 'antd';
import PayTag from '@/components/PayTag';

interface Info extends Album {
  trackId?: string;
}

interface AlbumCardProps {
  info: Info;
  isCurrent: boolean;
  playState: PlayState;
  playAlbum: ({ albumId }: { albumId: string }) => void;
  playPauseTrack: (isPlaying: boolean) => void;
  isTrack?: boolean;
  playSingleTrack: ({
    trackId,
    track,
    index,
  }: {
    trackId: string;
    track?: any;
    index?: number;
  }) => void;
}
export const DEFAULT_COVER =
  // tslint:disable-next-line:max-line-length
  '';
const AlbumCard: React.FC<AlbumCardProps> = memo(
  ({
    info,
    isCurrent,
    playState,
    playAlbum,
    playPauseTrack,
    isTrack = false,
    playSingleTrack,
  }) => {
    const {
      albumId,
      albumPlayCount,
      albumCoverPath,
      albumTitle,
      albumUserNickName,
      albumUrl,
      intro,
      isPaid,
      trackId,
    } = info;

    const isPlaying = isCurrent && playState === PlayState.PLAYING;

    const handleCoverClick = async (e: React.MouseEvent<HTMLDivElement>) => {
      const id = e.currentTarget.dataset.id;
      if (isCurrent) {
        playPauseTrack(isPlaying);
      } else {
        if (isTrack) {
          playSingleTrack({ trackId });
        } else {
          playAlbum({ albumId: id });
        }
      }
    };

    const handleTitleClick = (e: React.MouseEvent<HTMLHeadingElement>) => {
      const path = e.currentTarget.dataset.url;
      router.push(path);
    };

    return (
      <div
        className={styles.albumCard}
        style={isTrack ? { borderRadius: '50%', padding: '0' } : undefined}
      >
        <div
          className={styles.cover}
          data-id={albumId}
          onClick={handleCoverClick}
        >
          <img
            className={styles.img}
            src={albumCoverPath ? `http://${albumCoverPath}` : DEFAULT_COVER}
            alt={albumTitle}
          />
          <div className={styles.playConWrap}>
            <div
              className={`${styles.playCon} ${
                isPlaying ? styles.pausePlay : styles.startPlay
              }`}
            />
          </div>
        </div>
        {albumTitle && (
          <h4
            className={styles.title}
            title={albumTitle}
            data-url={albumUrl}
            onClick={handleTitleClick}
          >
            {isPaid && <PayTag />}
            {albumTitle}
          </h4>
        )}
      </div>
    );
  },
);

const mapStateToProps = ({ track, player }, { info, isTrack }) => {
  let isCurrent;
  if (isTrack) {
    isCurrent = +info.trackId === +track.trackId;
  } else {
    isCurrent = +track.albumId === +info.albumId;
  }
  const playState = isCurrent ? player.playState : null;
  return {
    isCurrent,
    playState,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    playAlbum(payload) {
      dispatch({ type: 'track/playAlbum', payload });
    },
    playSingleTrack(payload) {
      dispatch({ type: 'track/playSingleTrack', payload });
    },
    playPauseTrack(isPlaying) {
      const payload = {
        playState: isPlaying ? PlayState.PAUSE : PlayState.PLAYING,
      };
      dispatch({ type: 'player/updateState', payload });
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AlbumCard);
